<script setup lang="ts">
// import  { usetabBarStore } from "../../store/index";

import { onMounted, reactive, ref, computed } from 'vue';
// const title = ref('Hello')

// const current = ref('')



interface courseType {
  id: Number,
  title: String,
  tag: String,
  img: String,
  rate: Number,
  teacher: String,
  people: Number,
  content: String,
}

// 页面跳转
const details = (item: Object) => {
  uni.navigateTo({
    url: '/pagesB/course/details/details?detailData=' + JSON.stringify(item),
  });
};



const courseList = ref<courseType[]>([
  {
    id: 1,
    title: 'c语言程序设计',
    tag: '软件学院',
    img: '/courselist/1.jpg',
    rate: 3.5,
    teacher: '罗永胜',
    people: 99,
    content: '本课程将用最典型的实例和通俗的讲解为你讲授程序设计的思想'

  },
  {
    id: 2,
    title: 'java核心技术概论',
    tag: '软件学院',
    img: '/courselist/2.jpg',
    rate: 4.5,
    teacher: '江导',
    people: 100,
    content: 'java是一门程序设计语言，长期位居编程语言排行榜TIOBE的首位'

  }, {
    id: 3,
    title: 'python金融分析',
    tag: '软件学院',
    img: '/courselist/3.jpg',
    rate: 2,
    teacher: '张凯',
    people: 120,
    content: '简洁却强大、简单却专业，它是当今世界最受欢迎的编程语言!'

  },
  {
    id: 4,
    title: '高等数学',
    tag: '人文学院',
    img: '/courselist/4.jpg',
    rate: 3,
    teacher: '岑苑君 康永强',
    people: 70,
    content: '高等数学是各高校本科生必修的一门重要基础课'

  }, {
    id: 5,
    title: '交际英语',
    tag: '人文学院',
    img: '/courselist/5.jpg',
    rate: 2.5,
    teacher: '吴晓燕',
    people: 100,
    content: '以职业需求为导向，着重培养你的实际英语运用能力！'

  },
  {
    id: 6,
    title: 'web前端开发技术',
    tag: '软件学院',
    img: '/courselist/6.jpg',
    rate: 1,
    teacher: '罗永胜 何小民',
    people: 50,
    content: 'web前端开发是创建网页或APP界面呈现给用户的过程'

  }, {
    id: 7,
    title: '数据科学与应用',
    tag: '软件学院',
    img: '/courselist/7.jpg',
    rate: 4.5,
    teacher: '宋海生',
    people: 10,
    content: '本课程以大数据、人工智能时代为背景，采用项目制的学习方式'

  },
  {
    id: 8,
    title: '数据挖掘',
    tag: '软件学院',
    img: '/courselist/8.jpg',
    rate: 4,
    teacher: '宋海生',
    people: 40,
    content: '数据挖掘作为大数据分析技术主要组成部分'

  }, {
    id: 9,
    title: '数学建模',
    tag: '人文学院',
    img: '/courselist/9.jpg',
    rate: 4,
    teacher: '邱仰聪',
    people: 60,
    content: '欢迎热爱数学建模，挑战数学建模竞赛的同学来学习该课程'

  },
  {
    id: 10,
    title: '网页设计基础',
    tag: '软件学院',
    img: '/courselist/10.jpg',
    rate: 2,
    teacher: '罗永胜',
    people: 100,
    content: '以职业需求为导向，着重培养你的实际英语运用能力！'

  }, {
    id: 11,
    title: '哲学导论',
    tag: '人文学院',
    img: '/courselist/11.jpg',
    rate: 3,
    teacher: '黄子文',
    people: 49,
    content: '高校专业学生必修的专业基础课'

  },
  {
    id: 12,
    title: '前端开发',
    tag: '软件学院',
    img: '/courselist/12.jpg',
    rate: 4,
    teacher: '李改',
    people: 100,
    content: '前端开发技术课程由浅及深介绍了HTML语言及CSS技术相关知识'

  }
])
</script>

<template>
  <view class="courselist">
    <view class="courselist_item animate__animated animate__fadeInUp" v-for="item in courseList" @click="details(item)">
      <image :src="'/static/images' + item.img" mode=""></image>
      <view class="block">
        <view class="block_tag">{{ item.tag }}</view>
        <view style="color: #282f3e; font-size: 30rpx; font-weight: 600">{{ item.title }}</view>
        <view style="color: #585d69; font-size: 25rpx">{{ item.teacher }}</view>
        <view class="block_footer">
          <image src="/static/images/star.svg" mode=""></image>
          <view class="">{{ item.rate }}</view>
          <view class="">|</view>
          <view class="">{{ item.people }}&nbsp;学生</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.courselist {
  @include flex(space-between);
  flex-wrap: wrap;

  &_item {
    position: relative;
    width: 320rpx;
    height: 400rpx;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;

    image {
      width: 100%;
      height: 200rpx;
    }

    .block {
      height: 200rpx;
      @include flex-column();

      &_tag {
        position: absolute;
        background-color: #fff;
        border-radius: 10rpx;
        opacity: 0.7;
        top: 15rpx;
        left: 15rpx;
        padding: 6rpx;
        font-size: 18rpx;
        color: $bgcolor;
      }

      &_footer {
        @include flex();
        height: 60rpx;
        width: 300rpx;
        color: #616161;
        font-size: 25rpx;

        image {
          width: 35rpx;
        }
      }
    }
  }

  &_item:nth-child(2n + 1) {
    margin: 15rpx 15rpx 15rpx 0;
  }

  &_item:nth-child(2n) {
    margin: 15rpx 0 15rpx 15rpx;
  }
}
</style>
